// shallowReactive(浅的劫持，监视，响应式)与reactive(深的)

// 定义一个reactiveHandler对象
const reactiveHandler = {
    // 获取属性值
    get(target, prop) {
        if (prop === '_is_reactive') {
            return true
        }
        const result = Reflect.get(target, prop)
        console.warn('拦截了读取数据', prop, result)
        return result
    },
    // 修改或添加属性
    set(target, prop, value) {
        const result = Reflect.set(target, prop, value)
        console.warn('拦截了修改或添加属性', prop, value, result)
        return result
    },
    // 删除某个属性
    deleteProperty(target, prop) {
        const result = Reflect.deleteProperty(target, prop)
        console.warn('拦截了删除某属性', prop, result)
        return result
    }
}
// 定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target) {
    // 判断当前的目标对象是不是object（对象/数组）
    if (target && typeof target === 'object') {
        return new Proxy(target, reactiveHandler)
    }
    // 如果是基本类型，直接返回
    return target
}
// 定义一个reactive函数，传入一个目标对象
function reactive(target) {
    // 判断当前的目标对象是不是object（对象/数组）
    if (target && typeof target === 'object') {
        // 对数组或者是对象中所有的数据进行reactive递归处理
        // 先判断当前的数据是不是数组
        if(Array.isArray(target)) {
            // 数组的数据进行遍历操作
            target.forEach((item, index)=> {
                target[index] = reactive(item)
            })
        } else { // 先判断当前的数据是不是对象
            // 对象遍历
            Object.keys(target).forEach(key => {
                target[key] = reactive(target[key])
            })
        }
        return new Proxy(target, reactiveHandler)
    }
    // 如果是基本类型，直接返回
    return target
}
// ----------------

// 定义了一个readonlyHandler处理器
const readonlyHandler = {
    // 获取属性值
    get(target, prop) {
        if (prop === '_is_readonly') {
            return true
        }
        const result = Reflect.get(target, prop)
        console.warn('拦截了读取数据', prop, result)
        return result
    },
    set(target, prop, value) {
        console.warn('只能读取数据，不能修改数据或者添加数据')
        return true
    },
    deleteProperty(target, prop) {
        console.warn('只能读取数据，不能删除数据')
        return true
    }
}
// 定义一个shallowReadonly函数
function shallowReadonly(target) {
    // 需要判断当前的数据是不是对象
    if (target && typeof target === 'object') {
        return new Proxy(target, readonlyHandler)
    }
    return target
}
// 定义一个readonly函数
function readonly(target) {
    // 需要判断当前的数据是不是对象
    if (target && typeof target === 'object') {
        // 对数组或者是对象中所有的数据进行reactive递归处理
        // 先判断当前的数据是不是数组
        if(Array.isArray(target)) {
            // 数组的数据进行遍历操作
            target.forEach((item, index)=> {
                target[index] = readonly(item)
            })
        } else { // 先判断当前的数据是不是对象
            // 对象遍历
            Object.keys(target).forEach(key => {
                target[key] = readonly(target[key])
            })
        }
        return new Proxy(target, readonlyHandler)
    }
    // 不是的话直接返回
    return target
}

// 定义一个shallowRef函数
function shallowRef(target) {
    return {
        // 保存target数据保存起来
        _value: target,
        get value() {
            console.log('劫持到了读取数据')
            return this._value
        },
        set value(val) {
            console.log('劫持到了读取数据，准备更新界面', val)
            this._value = val
        }
    }
}

// 定义一个ref函数
function ref(target) {
    target = reactive(target)
    return {
        // 保存target数据保存起来
        _value: target,
        _is_ref: true, // 标识当前的对象是ref对象
        get value() {
            console.log('劫持到了读取数据')
            return this._value
        },
        set value(val) {
            console.log('劫持到了读取数据，准备更新界面', val)
            this._value = val
        }
    }
}

// 定义一个isRef函数，判断当前的对象是不是ref对象
function isRef(obj) {
   return obj && obj._is_ref
}

// 定义一个isReactive函数，判断当前的对象是不是isReactive对象
function isReactive(obj) {
    return obj && obj._is_reactive
 }

 // 定义一个isReadonly函数，判断当前的对象是不是isReadonly对象
function isReadonly(obj) {
    return obj && obj._is_readonly
 }

  // 定义一个isProxy函数，判断当前的对象是不是isProxy对象
function isProxy(obj) {
    return isReactive(obj) || isReadonly(obj)
 }